<template>
  <div class="camera-captures">
    <div class="capture-content">
      <div v-if="loading" class="loading-overlay">
        <div class="loading-spinner">
          <i class="el-icon-loading"></i>
          <span>加载中...</span>
        </div>
      </div>
      
      <div v-else-if="error" class="error-message">
        {{ error }}
        <el-button type="primary" size="small" @click="refreshCaptures">重试</el-button>
      </div>
      
      <div v-else-if="!latestCapture.picUrl" class="no-data">
        暂无抓拍记录
      </div>
      
      <div v-else class="latest-capture">
        <div class="capture-item">
          <div class="capture-image">
            <img 
              :src="latestCapture.picUrl" 
              :alt="'抓拍_' + latestCapture.captureTime"
              @error="handleImageError"
              @load="handleImageLoad"
              :class="{ 'loaded': imageLoaded }"
              referrerpolicy="no-referrer"
            >
            <div v-if="!imageLoaded && !error" class="image-loading">
              <i class="el-icon-picture-outline"></i>
              <span>图片加载中...</span>
            </div>
          </div>
          <div class="capture-info">
            <div class="info-left">
              <span class="device-serial">{{ deviceSerial }}</span>
              <div class="status-tag" :class="{ 'online': isOnline }">
                {{ isOnline ? '在线' : '离线' }}
              </div>
            </div>
            <span class="capture-time">{{ formatTime(latestCapture.captureTime) }}</span>
            <el-button type="primary" size="small" @click="refreshCaptures">
              <i class="el-icon-refresh"></i>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect, computed } from 'vue'
import dayjs from 'dayjs'
import { getCameraCaptures } from '../api/camera'
import { ElMessage } from 'element-plus'

const props = defineProps({
  deviceSerial: {
    type: String,
    required: true
  },
  isOnline: {
    type: Boolean,
    default: true
  }
})

const captures = ref([])
const loading = ref(false)
const error = ref(null)
const imageLoaded = ref(false)

const refreshCaptures = async () => {
  loading.value = true
  error.value = null
  imageLoaded.value = false
  
  try {
    const data = await getCameraCaptures(props.deviceSerial)
    console.log('Received captures:', data)
    if (Array.isArray(data) && data.length > 0) {
      captures.value = data
      // 预加载图片
      const img = new Image()
      img.src = data[0].picUrl
    } else {
      captures.value = []
    }
  } catch (err) {
    console.error('获取抓拍记录失败:', err)
    error.value = '获取抓拍记录失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

const latestCapture = computed(() => {
  console.log('Current captures:', captures.value)
  return captures.value[0] || {}
})

const formatTime = (timestamp) => {
  if (!timestamp) return ''
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
}

const handleImageError = (e) => {
  console.error('Image failed to load:', latestCapture.value.picUrl)
  console.error('Error event:', e)
  error.value = '图片加载失败'
  imageLoaded.value = false
}

const handleImageLoad = () => {
  console.log('Image loaded successfully:', latestCapture.value.picUrl)
  error.value = null
  imageLoaded.value = true
}

onMounted(() => {
  console.log('Component mounted, deviceSerial:', props.deviceSerial)
  refreshCaptures()
})

// 监听设备序列号变化
watchEffect(() => {
  if (props.deviceSerial) {
    refreshCaptures()
  }
})
</script>

<style scoped>
.camera-captures {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  min-width: 500px;
  flex: 1.8;
  overflow: hidden;
}

.capture-content {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.latest-capture {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.capture-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.capture-image {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  min-height: 400px;
}

.capture-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
}

.capture-image img.loaded {
  opacity: 1;
}

.image-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
}

.image-loading i {
  font-size: 40px;
  color: #1890ff;
}

.capture-info {
  height: 50px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.info-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.device-serial {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: rgba(245, 34, 45, 0.2);
  color: #f5222d;
}

.status-tag.online {
  background: rgba(82, 196, 26, 0.2);
  color: #52c41a;
}

.capture-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.loading-overlay,
.error-message,
.no-data {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.loading-spinner i {
  font-size: 24px;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

:deep(.el-button--small) {
  padding: 4px 8px;
  font-size: 12px;
}

:deep(.el-button--small i) {
  font-size: 12px;
}
</style> 